﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>CheckBox - Events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", function($scope){
                $scope.ctrlName = "ctrlSample";
                $scope.ctrlEnabled = true;
                $scope.ctrlText = "CheckBox";
                $scope.isThreeState = true;
                
                $scope.eventLog = [];
                
                $scope.onCheckedChanging = function(e){
                    $scope.eventLog.unshift({ name: "checkedChanging", info: " event was fired before CheckBox value is changed, checked property value is: ", value: e.checked }); 
                }
                
                $scope.onCheckedChanged = function(e){
                    $scope.eventLog.unshift({ name: "checkedChanged", info: " event was fired after CheckBox value is changed, checked property value set to: ", value: e.checked }); 
                }
                
                $scope.onCheckStateChanging = function(e){
                    $scope.eventLog.unshift({ name: "checkstateChanging", info: " event was fired before CheckBox state is changed, checkState property value is: ", value: e.checkState }); 
                }
                
                $scope.onCheckStateChanged = function(e){
                    $scope.eventLog.unshift({ name: "checkstateChanged", info: " event was fired after CheckBox state is changed, checkState property value set to: ", value: e.checkState }); 
                }
                
                $scope.onCheckClick = function(e){
                    $scope.eventLog.unshift({ name: "click", info: " event was fired when check box is clicked." }); 
                }
                
                $scope.onEnabledChanged = function(e){
                    $scope.eventLog.unshift({ name: "enabledChanged", info: " event was fired when CheckBox becomes enabled or disabled, enabled property value set to: ", value: e.enabled }); 
                }
                
                $scope.ctrlEvents = {
                    checkedChanging: function(e){
                        return $scope.onCheckedChanging(e);
                    },
                    checkedChanged: function(e){
                        return $scope.onCheckedChanged(e);
                    },
                    checkstateChanging: function(e){
                        return $scope.onCheckStateChanging(e);
                    },
                    checkstateChanged: function(e){
                        return $scope.onCheckStateChanged(e);
                    },
                    click: function(e){
                        return $scope.onCheckClick(e);
                    },
                    enabledChanged: function(e){
                        return $scope.onEnabledChanged(e);
                    }
                }

                $scope.clearEventLog = function(){
                    $scope.eventLog.length = 0;
                }
		});
    </script>
    <style type="text/css">
    .directive
    {
    	width: 100px;
    }
    .control-panel
    {
        padding-left: 20px;
        width: 250px;
    }
    .panel
    {
        width: 300px;
        height: 100px;
    }
    .event-panel
    {
        width: 600px;
    }
    .event-block
    {
        width: 600px;
        height: 200px;
    }
    .event-log
    {
        height: 168px;
    }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">CheckBox - Events</h2>
	        <div class="feature-content">
                <div class="panel">
                    <iui-checkbox name="{{ctrlName}}" class="directive" events="ctrlEvents" auto-check="true" three-state="isThreeState" enabled="ctrlEnabled">{{ctrlText}}</iui-checkbox>
                </div>
                <div class="control-panel">
                    <label><input type="checkbox" ng-model="isThreeState" /> Three State</label><br />
                    <label><input type="checkbox" ng-model="ctrlEnabled" /> Enabled</label><br />
                </div>
                <br style="clear:both;"/>
                <div class="event-panel">
                    <div class="event-block">
                        <button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>
                        <p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
                        <ul class="event-log">
                            <li ng-repeat="ev in eventLog"><span class="event-name">{{ev.name}}</span>{{ev.info}}<span class="event-value">{{ev.value}}</span></li>
                        </ul>
                    </div>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample presents most of events that are fired from CheckBox directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. From control panel on right side, you can change whether CheckBox can have two or three state values, and whether it is enabled or disabled.</p>
                    <p><span class="initial-space"></span>Here is list of events that are supported:</p>
                    <ul class="feature-points">
                        <li><span style="color:#c60d0d">checkedChanging</span> - Occurs before checked property value is changed</li>
                        <li><span style="color:#c60d0d">checkedChanged</span> - Occurs after checked property value is changed</li>
                        <li><span style="color:#c60d0d">checkstateChanging</span> - Occurs before checkState property value is changed</li>
                        <li><span style="color:#c60d0d">checkstateChanged</span> - Occurs after checkState property value is changed</li>
                        <li><span style="color:#c60d0d">click</span> - Occurs when check box is clicked</li>
                        <li><span style="color:#c60d0d">enabledChanged</span> - Occurs when control is enabled or disabled</li>
                        <li><span style="color:#c60d0d">styleChanged</span> - Occurs when control style has changed</li>
                    </ul>
                    <p><span class="initial-space"></span>Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.</p>
                    <p><span class="initial-space"></span>In this sample event log will not register style changes events, because changes to the CheckBox appearance are not demonstrated here.</p>
                </div>
            </div>
            </div>
        </div>
    </div>
</body>
</html>
